<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../components/echarts-4.0.4.min.js"></script>
		<style>
			html,body{
				width: 100%;
				height: 100%;
				background:#0A0F23;
			}
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>

	<body>
		<div id="main" style="width: 100%;height: 100%;"></div>
	</body>
	<script>
		var myChart = echarts.init(document.getElementById('main'));
		function getData(percent) {
		    return [{
		        value: percent,
		        name: percent,
		        itemStyle: {
		             normal: {
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#67c47b'
                    }, {
                        offset: 1,
                       color: '#4fac88'
                    }])
		            }
		        }
		    }, {
		        value: 1 - percent,
		        itemStyle: {
		            normal: {
		                color: 'transparent'
		            }
		        }
		    }];
		}
		
		placeHolderStyle = {
		    normal: {
		        label: {
		            show: false,
		        },
		        labelLine: {
		            show: false,
		        }
		
		
		    }
		};
		option = {
		    color: ['transparent', 'transparent', 'transparent', 'transparent', "transparent"],
		    backgroundColor: '#0A0F23',
		    tooltip: {
		        trigger: 'item',
		        formatter: function(params, ticket, callback) {
		
		            return params.seriesName + ": " + params.name * 100 + "%";
		        }
		    },
		    title: {
                text: '已建',
                left: 'center',
                top:'20%',
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            },
		    legend: {
		        top: "30%",
		        left: "5%",
		        itemHeight: 10,
		        data: ['河南', '山西', '辽宁', '浙江'],
		        textStyle: {
		            color: '#fff',
		            fontSize: 16
		        },
		        selectedMode: true,
		        orient: "vertical",
		
		    },
		    grid: {
		    	top:'10%',
		    	left:'10%',
		    	bottom:'5%',
		    	right:'10%',
		        containLabel: true
		    },
		    series: [{
		        name: '河南',
		        type: 'pie',
		        clockWise: true, //顺时加载
		        hoverAnimation: false, //鼠标移入变大
		        radius: [70, 80],
		        borderWidth: 5,
		        center: ['50%', '60%'],
		        itemStyle: placeHolderStyle,
		        data: getData(0.7)
		    }, {
		        name: '山西',
		        type: 'pie',
		        clockWise: true, //顺时加载
		        hoverAnimation: false, //鼠标移入变大
		        radius: [55, 65],
		        borderWidth: 5,
		        center: ['50%', '60%'],
		        itemStyle: placeHolderStyle,
		        data: getData(0.46)
		    }, {
		        name: '辽宁',
		        type: 'pie',
		        clockWise: true, //顺时加载
		        hoverAnimation: false, //鼠标移入变大
		        radius: [40, 50],
		        borderWidth: 5,
		        center: ['50%', '60%'],
		        itemStyle: placeHolderStyle,
		        data: getData(0.4)
		    }, {
		        name: '浙江',
		        type: 'pie',
		        clockWise: true, //顺时加载
		        hoverAnimation: false, //鼠标移入变大
		        radius: [25, 35],
		        borderWidth: 5,
		        center: ['50%', '60%'],
		        itemStyle: placeHolderStyle,
		        data: getData(0.3)
		    }]
		};
		
		myChart.setOption(option);
	</script>

</html>